<template>
  <!-- todo 左侧收藏夹和近期游戏记录未登录状态应该显示disabled状态 -->
  <!-- :class="main.showPhoneMenu ? 'isPhoneSHow' : 'hide'" -->
  <div class="bg-[#0f212e] sidebar menu">
    <div class="flex justify-around items-center w-full">
      <div
        v-if="!main.isPhoneModel"
        class="flex justify-around items-center w-[60px] show_menu"
        :style="isCollapse ? 'flex-direction: column' : ''"
      >
        <div class="min-w-[60px] min-h-[60px] flex items-center justify-center">
          <van-icon
            v-if="isPc"
            @click="
              isCollapse = !isCollapse;
              console.log(isCollapse);
            "
            class="wap-nav"
            :class="
              allowOpen
                ? 'cursor-pointer'
                : 'cursor-not-allowed pointer-events-none'
            "
            name="wap-nav"
          />
        </div>
      </div>

      <div
        v-if="!isCollapse && !main.isPhoneModel"
        class="w-full flex items-center text-white text-sm phone_ min-w-[140px]"
      >
        <img @click="goHome()" class="logo_s" :src="main.logo" alt="logo" />
      </div>
    </div>
    <!-- <div v-if="isCollapse" class="mt-[6px] ml-[6px]">
      <div
        @click="goPage('casino')"
        class="w-[44px] bgc_img h-[44px] rounded cursor-pointer text-white text-center leading-[44px]"
        :class="activeVal == 'casino' ? 'casino_active' : 'casino_bgc'"
      >
      </div>
      <div
        @click="goPage('sports')"
        class="w-[44px] bgc_img physical h-[44px] rounded bg-blue-400 mt-2 cursor-pointer text-white text-center leading-[44px]"
        :class="activeVal == 'sports' ? 'sports_active' : 'sports_bgc'"
      >
      </div>
    </div> -->
    <div
      class="pt-0 pd-0 mt-[6px] overflow-y-auto pr-0 max_h menu_fixed"
      :class="
        (isCollapse
          ? 'max-h-[calc(100svh-172px)]'
          : 'max-h-[calc(100svh-70px)]',
        main.isPhoneModel ? '' : 'ml-[8px] mr-[2px]')
      "
    >
      <el-menu
        :ref="menus"
        active-text-color="#fff"
        :collapse="isCollapse"
        background-color="#1a2c38"
        class="el-menu-vertical-demo"
        text-color="#fff"
        :default-openeds="openeds"
        @close="handleClose"
        @open="handleOpen"
        @select="handleSelect"
      >
        <el-menu-item
          class="group"
          index="9"
          :class="main.isLogin ? '' : 'disabled-menu'"
        >
          <svg-icon
            class="text-[20px] w-[20px] h-[20px] text-[#b1bad3] group-hover:text-white"
            name="Favorites"
          />
          <span class="ml-2 text-[#b1bad3] group-hover:text-white">{{
            $t("page.navbar.favorites")
          }}</span>
        </el-menu-item>
        <el-menu-item
          class="group"
          index="10"
          :class="main.isLogin ? '' : 'disabled-menu'"
        >
          <svg-icon
            class="text-[20px] w-[20px] h-[20px] text-[#b1bad3] group-hover:text-white"
            name="Statistics"
          />
          <span class="ml-2 text-[#b1bad3] group-hover:text-white">{{
            $t("page.navbar.Recent")
          }}</span>
        </el-menu-item>
        <el-menu-item class="group" index="5" v-if="main.isLogin">
          <svg-icon
            class="text-[20px] w-[20px] h-[20px] text-[#b1bad3] group-hover:text-white"
            name="Transactions"
          />
          <span class="ml-2 text-[#b1bad3] group-hover:text-white">
            {{ globalProperties.$t("page.navbar.mybet") }}
          </span>
        </el-menu-item>

        <div class="h-2 bg-[#0f212e]"></div>
        <el-menu-item class="group" index="23">
          <svg-icon
            class="text-[20px] text-[#b1bad3] group-hover:text-white"
            name="sports"
          />
          <span class="ml-2 text-[#b1bad3] group-hover:text-white">{{
            $t("page.navbar.sport")
          }}</span>
        </el-menu-item>

        <div class="h-2 bg-[#0f212e]"></div>

        <el-sub-menu class="group" index="22">
          <template #title>
            <svg-icon
              class="text-[20px] w-[20px] h-[20px] text-[#b1bad3] group-hover:text-white ml-[10px]"
              name="Game"
            />
            <span class="ml-2 text-[#b1bad3] group-hover:text-white">
              {{ globalProperties.$t("page.navbar.game") }}
            </span>
          </template>

          <div class="bg-[#2f4553] h-0.5"></div>

          <el-menu-item
            class="group game-item"
            v-for="(item, i) in main2.gameNav"
            :key="i + ''"
            :index="'0-' + item.id"
          >
            <img
              :src="main.static_base_url + item.icon"
              class="svg-hover-img"
              alt=""
            />
            <span class="ml-2 text-[#b1bad3] group-hover:text-white">
              {{ item.name }}
            </span>
          </el-menu-item>
        </el-sub-menu>
        <!-- <el-menu-item class="group" index="22"> </el-menu-item> -->
        <!-- <div class="bg-[#2f4553] h-0.5"></div> -->

        <!-- <div class="h-2 bg-[#0f212e]"></div>

        <el-menu-item class="group" index="24">
          <svg-icon
            class="text-[20px] text-[#b1bad3] group-hover:text-white"
            name="Provider"
          />
          <span class="ml-2 text-[#b1bad3] group-hover:text-white">
            {{ $t("layer.theCharts.theCharts") }}
          </span>
        </el-menu-item> -->

        <div class="h-2 bg-[#0f212e]"></div>
        <el-menu-item class="group" index="8-1">
          <svg-icon
            class="text-[20px] text-[#b1bad3] group-hover:text-white"
            name="Provider"
          />
          <span class="ml-2 text-[#b1bad3] group-hover:text-white">{{
            $t("page.navbar.gameprovider")
          }}</span>
        </el-menu-item>

        <div class="h-2 bg-[#0f212e]"></div>

        <el-sub-menu class="group" index="1" v-if="main.isLogin">
          <template #title>
            <svg-icon
              class="text-[20px] text-[#b1bad3] group-hover:text-white ml-[10px]"
              name="About us"
            />
            <span class="ml-[10px] text-[#b1bad3] group-hover:text-white">{{
              $t("page.navbar.profile")
            }}</span>
          </template>

          <el-menu-item index="1-7" class="group">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="Transactions1"
            />
            <span class="text-[#b1bad3] group-hover:text-white">
              {{ $t("page.navbar.Transactions") }}
            </span>
          </el-menu-item>
          <el-menu-item index="1-1" class="group">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="tixian"
            />
            <span class="text-[#b1bad3] group-hover:text-white">
              {{ $t("layer.wallet.withdrawMoney") }}
            </span>
          </el-menu-item>
          <el-menu-item index="1-2" class="group"
            ><svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="VIP"
            />
            <span class="text-[#b1bad3] group-hover:text-white">
              {{ $t("layer.activity.VIP") }}
            </span>
          </el-menu-item>
          <el-menu-item index="1-3" class="group">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="Statistics"
            />
            <span class="text-[#b1bad3] group-hover:text-white">
              {{ $t("page.navbar.statiscation") }}
            </span>
          </el-menu-item>
          <el-menu-item index="1-4" class="group">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="Notify"
            />
            <span class="text-[#b1bad3] group-hover:text-white">
              {{ $t("page.navbar.notify") }}
            </span>
          </el-menu-item>
          <el-menu-item index="1-5" class="group">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="setting"
            />
            <span class="text-[#b1bad3] group-hover:text-white">
              {{ $t("page.navbar.setting") }}
            </span>
          </el-menu-item>
          <el-menu-item index="1-6" class="group">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="Logout"
            />
            <span class="text-[#b1bad3] group-hover:text-white">
              {{ $t("page.navbar.logout") }}
            </span>
          </el-menu-item>
        </el-sub-menu>
        <!-- <el-sub-menu class="group" index="5" :popper-offset="8">
          <template #title>
            <svg-icon
              class="text-[20px] text-[#b1bad3] group-hover:text-white ml-[10px]"
              name="Promotions"
            />
            <span class="ml-[10px] text-[#b1bad3]">{{
              globalProperties.$t("page.navbar.promotions")
            }}</span>
          </template>

          <el-menu-item
            :index="'2-' + items.id"
            v-for="(items, index) in menuls"
          >
            {{ items.title }}
          </el-menu-item>

          <el-menu-item
            v-for="(item, index) in cusActiveMenu"
            :index="item.query.tab"
            >{{ item.title }}</el-menu-item
          >
        </el-sub-menu> -->

        <el-menu-item class="group game-item" index="25" :popper-offset="8">
          <svg-icon
            class="text-[20px] text-[#b1bad3] group-hover:text-white"
            name="Promotions"
          />
          <span class="ml-[10px] text-[#b1bad3]">{{
            globalProperties.$t("page.navbar.promotions")
          }}</span>
        </el-menu-item>

        <el-menu-item class="group" index="3">
          <svg-icon
            class="text-[20px] text-[#b1bad3] group-hover:text-white"
            name="Affiliate"
          />
          <span class="ml-[10px] text-[#b1bad3]">{{
            globalProperties.$t("page.navbar.affiliate")
          }}</span>
        </el-menu-item>
        <el-menu-item class="group game-item" index="7-1">
          <svg-icon
            class="text-[20px] text-[#b1bad3] svg-hover-img"
            name="Profile"
          />
          <span class="text-[#b1bad3] group-hover:text-white ml-[10px]">
            {{ $t("page.navbar.aboutus") }}
          </span>
        </el-menu-item>
        <el-menu-item class="group game-item" index="11">
          <svg-icon
            class="text-[20px] text-[#b1bad3] svg-hover-img"
            name="Customer service"
          />
          <span class="text-[#b1bad3] group-hover:text-white ml-[10px]">
            {{ $t("page.navbar.customerService") }}
          </span>
        </el-menu-item>
        <el-menu-item class="group game-item" index="Installation-package">
          <svg-icon
            class="text-[20px] text-[#b1bad3] svg-hover-img"
            name="App"
          />
          <span class="text-[#b1bad3] group-hover:text-white ml-[10px]">
            {{ $t("page.navbar.Installationpackage") }}
          </span>
        </el-menu-item>

        <!-- <el-sub-menu class="group" index="7" :popper-offset="8">
          <template #title>
            <van-icon color="#b1bad3" name="friends" />
            <span class="ml-2">{{ $t("page.navbar.aboutus") }}</span>
          </template>
          <el-menu-item index="7-1">
            {{ $t("page.navbar.PrivacyPolicy") }}</el-menu-item
          >
          <el-menu-item index="7-3">{{
            $t("page.navbar.AMLPolicy")
          }}</el-menu-item>
          <el-menu-item index="7-4">{{
            $t("page.navbar.TermsofService")
          }}</el-menu-item>
        </el-sub-menu> -->
        <el-sub-menu class="group" index="12" :popper-offset="8">
          <template #title>
            <svg-icon
              class="text-[20px] text-[#b1bad3] group-hover:text-white ml-[10px]"
              name="Language"
            />
            <span class="ml-2 text-[#b1bad3]">
              {{ $t("page.navbar.language") }}
            </span>
          </template>
          <el-menu-item
            :index="'lang-' + items.lang"
            v-for="(items, index) in main.lang_support_list"
          >
            <span class="ml-2 text-[#b1bad3]">
              {{ items.name }}
            </span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

      <!-- <el-select
        @change="changeLang"
        v-model="langValue"
        placeholder="Select"
        size="small"
        style="width: 240px"
      >
        <el-option label="English" value="en" />
        <el-option label="中文" value="cn" />
      </el-select> -->
      <!-- <div class="menu-lan text-[#b1bad3] font-semibold text-sm padding_b">
        <div
          class="cursor-pointer py-2 pl-[12px] bg-[#1a2c38] hover:bg-[#2f4553]"
          v-for="item in main.lang_support_list"
          :key="item"
          @click="changeLang(item.lang)"
        >
          {{ isCollapse ? item.abbr : item.name }}
        </div>
      </div> -->
    </div>
  </div>
  <!-- 通知 弹窗 -->
  <notify
    :notifyShow="notifyShow"
    ref="notifyRef"
    @notifyClose="notifyClose"
  ></notify>
  <!-- 统计 弹窗 -->
  <statistics
    :statisticsShow="statisticsShow"
    ref="statisticsRef"
    @statisticsClose="statisticsClose"
  ></statistics>
  <!-- vip 弹窗 -->
  <vip :vipShow="vipShow" ref="vipRef" @vipClose="vipClose"></vip>
  <customerService></customerService>
</template>

<script setup>
import {
  ref,
  onMounted,
  nextTick,
  onBeforeUnmount,
  getCurrentInstance,
  defineAsyncComponent,
  watch,
  computed
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { mainAct } from "@/store/activeda";
import { mainNav } from "@/store/nav";
import { storeToRefs } from "pinia"; //引入pinia转换
import { casionInit, typeIcon } from "../../api/casion.js";
import { userLogout, userVip, init } from "../../api/user.js";
import { mainWallet } from "@/store/wallet";
import { getActiveCustomizeView } from "../../api/active.js";
import { dateTimeZone } from "../../utils/date";
import { eventBus } from "@/utils/eventBus.js";

const showWallet = mainWallet();
const main = mainAct();
const main2 = mainNav();
onMounted(async () => {});
const cusActiveMenu = computed(() => {
  return menu().getCustomeMenu;
});

const { showPhoneMenu } = storeToRefs(main); //响应式

const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
const openeds = ref(["0", "22", "12"]);
import { stopScroll, canScroll, param2Obj } from "../../utils/scrollload";
const statistics = defineAsyncComponent(() =>
  import("../layer/statistics.vue")
);
const vip = defineAsyncComponent(() => import("../layer/vip.vue"));
const customerService = defineAsyncComponent(() =>
  import("../layer/customer-service.vue")
);

import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const langValue = ref(null);
const changeLang = lang => {
  if (lang) {
    langValue.value = lang;
  }
  locale.value = langValue.value;
  localStorage.setItem("lang", langValue.value);
  location.reload();
};
const router = useRouter();
const route = useRoute();
const isCollapse = ref(false);
const isPc = ref(true);
const menus = ref(null);
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log("关闭");
  // if (key == 0 ) {
  //   //阻止关闭
  //   console.log("阻止关闭");
  //   menus.value.open(key)
  //   menus.value.open(keyPath)
  // }
  console.log(key, keyPath);

  switch (key) {
    case "22":
      handleSelect(key, keyPath);
      break;
    default:
      break;
  }
};
//路由导航
const handleSelect = (key, keyPath) => {
  main2.isLoading = false;
  console.log(key, keyPath);
  //如果 0- 开头的，则是游戏分类，需要跳转娱乐城页面并且传递对应id
  let key_slice = key.slice(0, 2);
  if (key_slice == "0-") {
    let ket_id = key.slice(2);
    main2.activeTab = ket_id;
    eventBus.emit("changeActiveTab", ket_id);
    if (window.innerWidth < 600) {
      main.showPhoneMenu = false;
    }
    router.push("gameDetails");
    return;
  }

  // 自定义路由
  if (keyPath?.[1]?.includes("active")) {
    router.push({ path: "active", query: { tab: keyPath[1] } });
  }

  // 语言切换
  if (keyPath?.[0]?.includes("12")) {
    const partAfterDash = key.split("-")[1];
    changeLang(partAfterDash);
    return;
  }

  switch (key) {
    // case
    case "1-1":
      // clickWallet();
      showWallet.getBankInfo("showBank");
      break;
    case "1-2":
      clickVip();
      break;
    case "1-3":
      clickStatistics();
      break;
    case "1-4":
      clickNotify();
      break;
    case "1-5":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("setting");
      break;
    case "1-6":
      logout();
      break;
    case "1-7":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("tsaHistory");
      break;
    case "2-1":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab1" } });
      break;
    case "2-2":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab2" } });
      break;
    case "2-3":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab3" } });
      break;
    case "2-4":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab4" } });
      break;
    case "2-5":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab5" } });
      break;
    case "2-6":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab6" } });
      break;
    case "2-7":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab7" } });
      break;
    case "2-8":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab8" } });
      break;
    case "2-9":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab9" } });
      break;
    case "2-10":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab10" } });
      break;
    case "2-11":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push({ path: "active", query: { tab: "tab11" } });
      break;
    case "3":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("programe");
      break;
    case "4":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("vip");
      break;
    case "5":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("myBet");
      break;
    case "6":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("responsible");
      break;
    case "7-1":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      main2.aboutusTab = "tab1";
      router.push("aboutus");
      break;
    case "7-3":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      main2.aboutusTab = "tab3";

      router.push("aboutus");
      break;
    case "7-4":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      main2.aboutusTab = "tab4";

      router.push("aboutus");
      break;
    case "8-1":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("operator");
      break;
    case "9":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("favorites");
      break;
    case "10":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      router.push("recent");
      break;
    case "11":
      // main.showService = true;
      // router.push("service");
      window.open(main.customerService, "_blank");
      break;
    case "22":
      if (window.innerWidth < 600) {
        main.showPhoneMenu = false;
      }
      main2.activeTab = "all";
      eventBus.emit("changeActiveTab", "all");
      console.log("aaaaaaaaaaaaaaaaaa");

      router.push("casino");
      break;
    case "23":
      router.push("sports");
      break;
    case "Installation-package":
      //  https://dl.jk66.games/ // 测试环境下载页
      //  https://dl.jk.game/ // 正试环境下载页
      console.log("/****************/", main.download);
      if (process.env.NODE_ENV !== "production") {
        window.open(
          `http://localhost:5174/?ios=${JSON.stringify(main.download)}`
        );
      } else {
        window.open(
          `${main.download.customer_service}?ios=${JSON.stringify(
            main.download
          )}`
        );
      }

      break;
    case "24":
      router.push("theCharts");
      break;
    case "25":
      router.push("activity");
      break;
    default:
      break;
  }
};
let activeVal = ref("casino");

const goHome = () => {
  router.push("casino");
};

watch(
  () => route.path,
  (newValue, old) => {
    let str = newValue;
    if (str.length) {
      activeVal.value = str.slice(1);
    }
  }
);

const goPage = e => {
  activeVal.value = e;
  main.showPhoneMenu = false;
  router.push(e);
};
const allowOpen = ref(true);
const changeLanguage = lang => {
  this.$i18n.locale = lang;
  localStorage.setItem("language", lang);
};
const iconList = ref(null);
const getCasionInit = async () => {
  let res = await casionInit();
  // console.log(res);
  res.data.category_nav.forEach(items => {
    iconList.value.forEach(iitem => {
      if (items.id == iitem.id) {
        items.icon = iitem.icon;
      }
    });
  });
  main2.gameNav = res.data.category_nav;
  // 需要过滤体育的选项
  main.business_list = res.data.business_list.filter(
    item => item.code != "tss"
  );
};
const getTypeIcon = async () => {
  let res = await typeIcon();
  if (res.errno == 0) {
    // console.log("⬇⬇   ---> icon分类 <---   ⬇⬇");
    let reg = /\\/g;
    res.data.list?.forEach(item => {
      item.icon = item.icon.replace(reg, "");
    });
    // console.log(res.data);
    iconList.value = res.data.list;
    main.svgData = iconList.value;
  }
};

const menuls = ref([]);
//监听页面宽度控制展开menu
onMounted(async () => {
  await getTypeIcon();
  getCasionInit();

  activeVal.value = route.path.slice(1);
  await nextTick();
  // 判断页面宽度动态绑定页面缩放
  console.log(window.innerWidth);
  if (window.innerWidth < 1024 && window.innerWidth > 600) {
    // allowOpen.value = false;
    isCollapse.value = true;
    isPc.value = true;
  } else if (window.innerWidth > 1024) {
    allowOpen.value = true;
    isCollapse.value = false;
    isPc.value = true;
  } else if (window.innerWidth < 601) {
    allowOpen.value = true;
    isCollapse.value = false;
    isPc.value = false;
  }
  window.addEventListener("resize", handleResize);

  menuls.value = [];
  let menuls1 = [];

  menuls.value = menuls1;
  main.active_list = menuls.value;
  console.log("/*************/", main.active_list);

  window.addEventListener("orientationchange", function (event) {
    isCollapse.value = false;
    console.log("qihuan", isCollapse.value);
  });
});

// 监听窗口宽度变化
const handleResize = () => {
  if (main.isPhoneModel) return;
  if (window.innerWidth < 1024 && window.innerWidth > 600) {
    // allowOpen.value = false;
    isCollapse.value = true;
    isPc.value = true;
  } else if (window.innerWidth > 1024) {
    allowOpen.value = true;
    isCollapse.value = false;
    isPc.value = true;
  } else if (window.innerWidth < 601) {
    allowOpen.value = true;
    isCollapse.value = false;
    isPc.value = false;
  }
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});

//通知弹窗
const notifyShow = ref(false);
const notifyRef = ref(null);
const clickNotify = () => {
  nextTick(() => {
    console.log("notifyRef.value", notifyRef.value);
    // notifyRef.value.goShow();
    // notifyShow.value = true;
    main.showNotify();
  });
  // main.showPhoneMenu = false;
};
const notifyClose = async () => {
  await nextTick();
  main.notifyClose();
};
const logout = async () => {
  console.log("登出");
  let res = await userLogout();
  console.log(res);
  if (res.errno == 0) {
    main2.isLogin = false;
    router.push("casino");

    setTimeout(() => {
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("vipinfo");

      localStorage.clear();

      window.location.reload();
    }, 200);
  } else {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: res.msg,
      type: "error"
    });
    setTimeout(() => {
      main2.isLogin = false;
      sessionStorage.clear();
      location.reload();
    }, 2000);
  }
};
//统计弹窗
const statisticsShow = ref(false);
const statisticsRef = ref(null);
const clickStatistics = async () => {
  getVip();
  stopScroll();
  statisticsShow.value = true;
};
const statisticsClose = async () => {
  await nextTick();
  statisticsShow.value = false;
  canScroll();
};

const getVip = async () => {
  let res = await userVip();
  if (res.errno == 0) {
    let data = res.data;
    data.created_at = dateTimeZone(
      res.data.created_at,
      "{y}-{m}-{d} {h}:{i}:{s}",
      main.timeZone
    );
    main.vipinfo = data;
  }
};

//vip弹窗
const vipShow = ref(false);
const vipRef = ref(null);
const clickVip = () => {
  getVip();
  stopScroll();

  vipShow.value = true;
};
const vipClose = async () => {
  await nextTick();
  vipShow.value = false;
  canScroll();
};

//wallet弹窗
const walletShow = ref(false);
const walletRef = ref(null);
const clickWallet = () => {
  stopScroll();
  walletShow.value = true;
};
const walletClose = async () => {
  await nextTick();
  walletShow.value = false;
  canScroll();
};
</script>

<style>
.sidebar {
  /* overflow-y: auto;
    overflow-x: unset; */
  background: #0f212e;
  height: calc(100vh-128px);
}
.el-menu {
  border-right: 0;
  border-radius: 0.25rem;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
}
.el-menu--collapse.el-menu--collapse {
  width: 40px !important;
}
/* .el-menu--collapse {
  width: 44px !important;
} */
.el-menu .el-menu--inline {
  background-color: #213743;
}

.el-sub-menu,
.el-sub-menu__title {
  padding: 0px !important;
}

.el-menu-item {
  padding: 0 !important;
}

.el-menu-item,
.el-sub-menu__title {
  border-radius: 0.25rem;
  height: 40px !important;
  line-height: 40px !important;
  font-weight: 600;
}
.el-menu-item.is-active {
  background-color: #2f4553;
}
.el-menu-item.is-active .van-icon {
  color: #fff !important;
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: #2f4553;
}
.el-menu-item:hover .van-icon {
  color: #fff !important;
}
.el-menu-item {
  padding-left: 10px !important;
}

.wap-nav {
  font-size: 30px;
  color: #b1bad3;
}
.wap-nav:hover {
  color: #fff;
}
.nav-btn {
  width: 80px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.2);
}
.van-icon {
  font-size: 20px;
}

.casino {
  background-image: url("https://mediumrare.imgix.net/casino-poker-cards-green-en.jpg?auto=format&w=78");
}
.casino_long:hover {
  background-image: url("https://mediumrare.imgix.net/casino-poker-cards-green-en.jpg?auto=format&w=78");
}
.casino_long {
  background-image: url("	https://mediumrare.imgix.net/casino-poker-cards-en.jpg?auto=format&w=78");
}

.physical {
  background-image: url("https://mediumrare.imgix.net/sports-balls-orange-en.jpg?auto=format&w=78");
}
.physical_long:hover {
  background-image: url("https://mediumrare.imgix.net/sports-balls-orange-en.jpg?auto=format&w=78");
}
.physical_long {
  background-image: url("https://mediumrare.imgix.net/sports-balls-en.jpg?auto=format&w=78");
}

@media (max-width: 600px) {
  .isPhoneSHow {
    position: relative;
    /* top: 55px; */
    width: 100%;
    /* height: auto; */
    min-height: calc(100svh - 136px);
    z-index: 99;
  }
  .hide {
    display: none;
  }
  .menu-lan {
    margin-bottom: 60px;
  }

  .show_menu {
    display: none;
  }

  .phon_btn {
    width: 46%;
  }

  .phone_ {
    display: none;
  }

  .menu_fixed {
    position: relative;
    width: 100%;
    /* padding-bottom: 70px; */
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .padding_b {
    padding-bottom: 62px;
  }

  .menuData {
    padding-bottom: 70px;
  }
}

.bgc_img {
  background-size: 100% 100%;
}

.casino_bgc {
  background-image: url("https://mediumrare.imgix.net/casino-poker-cards-small-en.jpg?auto=format&w=44") !important;
}

.casino_active {
  background-image: url("https://mediumrare.imgix.net/casino-poker-cards-small-green-en.jpg?auto=format&w=44") !important;
}
.casino_bgc:hover {
  background-image: url("https://mediumrare.imgix.net/casino-poker-cards-small-green-en.jpg?auto=format&w=44") !important;
}
.sports_bgc {
  background-image: url("https://mediumrare.imgix.net/sports-balls-small-en.jpg?auto=format&w=44") !important;
}
.sports_bgc:hover {
  background-image: url("https://mediumrare.imgix.net/sports-balls-small-orange-en.jpg?auto=format&w=44") !important;
}
.sports_active {
  background-image: url("https://mediumrare.imgix.net/sports-balls-small-orange-en.jpg?auto=format&w=44") !important;
}
.svg-hover-img {
  width: 20px;
}
.game-item:hover .svg-hover-img {
  filter: brightness(200%); /* 增加亮度来实现高亮效果 */
  transition: filter 0.1s ease; /* 平滑过渡效果 */
}
.disabled-menu {
  pointer-events: none;
  cursor: not-allowed;
}
.logo_s {
  width: auto;
  max-height: 36px;
  color: #fff;
  cursor: pointer;
  margin: 0 auto;
}
.menuData {
  height: calc(100vh - 66px);
}
</style>
